<template>

  <div>
    <el-form>
    	<el-form-item label="商品名称" id="goodsName">
        <el-col :span="10">
					<el-input type="text" v-model="goodsName" ></el-input>
				</el-col>
    	</el-form-item>

    </el-form>
    <el-tooltip content="查询" id="cx">
      	<el-button icon="el-icon-search " type="primary" @click="initNews()"></el-button>
      </el-tooltip>
    <el-table :data="goodsList"  id="tab" >

      <el-table-column label="用户" prop="userName"></el-table-column>
    	<el-table-column label="商品名称" prop="goodsName"></el-table-column>
    	<el-table-column label="商品数量" prop="goodsNum"></el-table-column>
    	<el-table-column label="商品价格" prop="price"></el-table-column>
      <el-table-column label="商品状态" prop="goodsState" >
        <template slot-scope="scope">
          <p>
            {{scope.row.goodsState=="0"?"已上架":"未上架"}}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="goodsState">
        <template slot-scope="scope">
         <div @click="unShelve(scope)">
           <a href="#">
             <p>
               {{scope.row.goodsState=="0"?"下架":"上架"}}
             </p>
           </a>
         </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total,prev,pager,next,jumper,sizes"
    :total="page.total"
    :page-size="page.pageSize"
    :current-page="page.pageNum"
    :page-sizes="page.pageSizes"
    @current-change="currentPage"
    @size-change="changeSizes"
    >
    </el-pagination>
  </div>
</template>

<script>
  import {getList,unShelveState} from '@/api/goodsManage.js'
  export default {
    data(){
      return{
          goodsList:[],
          id:'',
          state:'',
          page:{
          	pageNum:1,
          	pageSize:5,
            total:0,
            pageSizes:[5,10,15]
          },
          goodsName:''
      }
    },
    methods:{
     initNews(){
       let param ={
         pageNum:this.page.pageNum,
         pageSize:this.page.pageSize,
         goodsName:this.goodsName
       }
     	getList(param).then(result => {
        this.goodsList = result.data.list
        this.page.total = result.data.total
        console.log(this.page.total)

     	})
     },
     unShelve(params){
      if(params.row.goodsState==1){
        this.state=0
      }else{
        this.state=1
      }
        this.id = params.row.id
      let param ={
        id:this.id,
        state:this.state
      }

      unShelveState(param).then(result =>{
        alert("修改成功!")
        this.initNews()
      })

     },
     currentPage(value){
       this.page.pageNum =value
       this.initNews()
     },
     changeSizes(value){
       this.page.pageSize =value
       this.initNews(this.page.pageSize)
     }
    },
    beforeMount() {
      this.initNews()
    }
  }
</script>
<style>
  #cx{
    float: left;
  }
  #goodsName{
    float: left;
  }
  a{
    text-underline: inherit;
    color: #000;
    font-size: 20px;
  }
</style>
